<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <!--<s:head/>-->
    <title>乐淘首页</title>
    <jsp:include page="component/head.jsp"/>
    <script type="text/javascript">
		$(document).ready(function () {
			$.getJSON("getcategory.action", function(data) {
 				$.each(data, function(i, category) {
 					var url = "getgoodsbycategory.action?category.cid="+category.cid;
					$.getJSON(url,function(goods) {
						var linkGoodsUrl =encodeURI("p_index_goods.action?cid="+category.cid+"&cname="+category.cname);
						var inner = '<div class="col-xs-4">' +
										'<div class="top-row-col1 text-center">' +
											'<h2>'+category.cname+'</h2>' +
											'<img class="r-img text-center" src="${pageContext.request.contextPath}/images/man-r-img.jpg" title="name" />' +
											'<span><img src="${pageContext.request.contextPath}/images/obj2.png" title="name" /></span>'+
											'<h4>共计</h4>'+
											'<label>'+goods.length+'件商品</label>'+
											'<a class="r-list-w" href='+linkGoodsUrl+'>'+
											'<img src="${pageContext.request.contextPath}/images/list-icon.png" title="list" /></a>'+
									'</div></div>';
						$("#category").append(inner);
					});
					

				}); 
			});
			 
			
		});	
	</script>
  </head>
  
  <body>
		<jsp:include page="component/navigator.jsp"/>
			<!----start-slider-script---->
			<script src="${pageContext.request.contextPath}/js/responsiveslides.min.js"></script>
			 <script>
			    // You can also use "$(window).load(function() {"
			    $(function () {
			var url = "getgoodsbyhot.action";
		    $.getJSON(url, function(data) {
		        $.each(data, function(i, good) {
		        console.log(good.gname);
 		           $("#slider4").append(
 		           "<li><img style='height:500px;' src=${pageContext.request.contextPath}/upload/"
 		           +good.gimage 
 		           +"><div class='caption'><div class='slide-text-info'><h1>"
 		           +good.gname
 		           +"</h1><label>"
 		           +good.category.cname
 		           +"</label><a class='slide-btn' href=#><span>"
 		           +good.gprice
 		           +"</span> <small>GET NOW</small><label> </label></a></div></div></li>"
 		          );
		       });
		       // Slideshow 4
			      $("#slider4").responsiveSlides({
			        auto: true,
			        pager: true,
			        nav: true,
			        speed: 500,
			        namespace: "callbacks",
			        before: function () {
			          $('.events').append("<li>before event fired.</li>");
			        },
			        after: function () {
			          $('.events').append("<li>after event fired.</li>");
			        }
			      });
		       });
			      
			      

			    });
			    
			  </script>
			<!----//End-slider-script---->
			<!-- Slideshow 4 -->
			    <div  id="top" class="callbacks_container">
			      <ul class="rslides" id="slider4" name="slider4">
	 
			      </ul>
			    </div>
			    <div class="clearfix"> </div>
			<!----- //End-slider---->
			<!----content---->
				<div class="content">
					<div class="container">
				<!---top-row--->
				<div class="top-row">
					<div class="top-row" >
					<div id="category"></div>
					</div>
					<div class="clearfix"> </div>
				</div>
				</div>
				<!---top-row--->
                <!--<div class="copyrights">Collect from <a href="http://www.cssmoban.com/"  title="网站模板">网站模板</a></div>-->
				<div class="container"> 
				<!----speical-products---->
				<div class="special-products">
					<div class="s-products-head">
						<div class="s-products-head-left">
							<h3>周边 <span>商品</span></h3>
						</div>
						<div class="s-products-head-right">
							<a href="p_bmap.action"><span> </span>地图选点</a>
						</div>
						<div class="clearfix"> </div>
					</div>
					<!----special-products-grids---->
					<div class="special-products-grids">
						
						<div class="clearfix"> </div>
					</div>
					<!---//special-products-grids---->
				</div>
				<!---//speical-products---->
				</div>
			<!----content---->
			<jsp:include page="component/footer.jsp"/>
		
		</div>
		<!----container---->
	
</body>
</html>
